@layout("/common/_form.html",{js:["/assets/nanPopupAdvert/nanPopupAdvert_add.js"],css:["/assets/common/module/formSelects/formSelects-v4.css"]}){

<form class="layui-form" id="nanPopupAdvertForm" lay-filter="nanPopupAdvertForm">
    <div class="layui-fluid" style="padding-bottom: 75px;">
        <div class="layui-card">
            <div class="layui-card-header">基本信息</div>
            <div class="layui-card-body">
                <div class="layui-form-item layui-row">
                    <input name="id" type="hidden"/>

                    <div class="layui-inline layui-col-md6">
                        <label class="layui-form-label layui-form-required">广告名称</label>
                        <div class="layui-input-block">
                            <input id="name" name="name" placeholder="请输入广告名称" type="text" class="layui-input" lay-verify="required" required />
                        </div>
                    </div>

                    <div class="layui-inline layui-col-md6">
                        <label class="layui-form-label layui-form-required">广告类型</label>
                        <div class="layui-input-block">
                            <select id="type" name="type" lay-filter="type" lay-verify="required" required>
                                <option value="">-请选择-</option>
                                <option value="1">绑定设备后弹窗</option>
                                <option value="2">即时弹窗</option>
                                <option value="3">评论弹窗</option>
                                <option value="4">注册时长</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline layui-col-md6" id="deviceField">
                        <label class="layui-form-label layui-form-required">设备</label>
                        <div class="layui-input-block">
                            <select id="deviceId" name="deviceId" lay-search lay-verify="required" required>
                                <option value="">-请选择设备-</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline layui-col-md6">
                        <label class="layui-form-label layui-form-required">状态</label>
                        <div class="layui-input-block">
                            <select name="status" lay-verify="required" required>
                                <option value="">-请选择-</option>
                                <option value="1" selected>启用</option>
                                <option value="0">禁用</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline layui-col-md6">
                        <label class="layui-form-label">排序</label>
                        <div class="layui-input-block">
                            <input id="sort" name="sort" placeholder="请输入排序，越大越靠前" type="number" class="layui-input" value="0" />
                        </div>
                    </div>

                    <div class="layui-inline layui-col-md6" id="delayHoursField" style="display:none;">
                        <label class="layui-form-label layui-form-required">注册时长(小时)</label>
                        <div class="layui-input-block">
                            <input id="delayHoursInput" name="delayHours" placeholder="请输入注册时长，支持小数" type="number" step="0.1" class="layui-input" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 类型1/2的广告内容列表 -->
        <div class="layui-card" id="itemsCard" style="display:none;">
            <div class="layui-card-header">
                广告内容列表
                <button type="button" class="layui-btn layui-btn-sm" id="btnAddItem" style="float:right;">添加内容</button>
            </div>
            <div class="layui-card-body">
                <div id="itemsContainer"></div>
            </div>
        </div>

        <!-- 类型3的评论弹窗字段 -->
        <div class="layui-card" id="commentCard" style="display:none;">
            <div class="layui-card-header">评论弹窗配置</div>
            <div class="layui-card-body">
                <div class="layui-form-item layui-row">
                    <div class="layui-inline layui-col-md6">
                        <label class="layui-form-label layui-form-required">延迟时间(小时)</label>
                        <div class="layui-input-block">
                            <input id="delayHours" name="delayHours" placeholder="请输入延迟时间，支持小数" type="number" step="0.1" class="layui-input" />
                        </div>
                    </div>

                    <div class="layui-inline layui-col-md6">
                        <label class="layui-form-label layui-form-required">链接类型</label>
                        <div class="layui-input-block">
                            <select id="linkType" name="linkType">
                                <option value="">-请选择-</option>
                                <option value="1">内链</option>
                                <option value="2">外链</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline layui-col-md12">
                        <label class="layui-form-label layui-form-required">链接地址</label>
                        <div class="layui-input-block">
                            <input id="linkUrl" name="linkUrl" placeholder="请输入链接地址" type="text" class="layui-input" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 类型4的广告内容列表 -->
        <div class="layui-card" id="onlineItemsCard" style="display:none;">
            <div class="layui-card-header">
                广告内容列表
                <button type="button" class="layui-btn layui-btn-sm" id="btnAddOnlineItem" style="float:right;">添加内容</button>
            </div>
            <div class="layui-card-body">
                <div id="onlineItemsContainer"></div>
            </div>
        </div>
    </div>

    <div class="form-group-bottom text-center">
        <button class="layui-btn" lay-filter="btnSubmit" lay-submit>&emsp;提交&emsp;</button>
        <button type="reset" class="layui-btn layui-btn-primary" id="cancel">&emsp;取消&emsp;</button>
    </div>
</form>

<!-- 广告内容项模板 -->
<script type="text/html" id="itemTemplate">
    <div class="item-box" data-index="{{index}}">
        <div class="layui-form-item layui-row" style="border:1px solid #e6e6e6; padding:15px; margin-bottom:15px; position:relative;">
            <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-remove-item" style="position:absolute; top:10px; right:10px; z-index:10;">删除</button>
            
            <div class="layui-inline layui-col-md6">
                <label class="layui-form-label layui-form-required">图片</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-icon layui-icon-picture btn-upload-image">上传图片</button>
                    <div class="layui-upload-wrap" style="min-height:160px;">
                        <input type="hidden" name="items[{{index}}].imageUrl" class="item-imageUrl" />
                        <img class="layui-upload-img item-imagePreview" style="max-width:200px; max-height:150px; display:block; margin-top:10px;">
                    </div>
                </div>
            </div>

            <div class="layui-inline layui-col-md6">
                <label class="layui-form-label layui-form-required">链接类型</label>
                <div class="layui-input-block">
                    <select name="items[{{index}}].linkType" class="item-linkType">
                        <option value="">-请选择-</option>
                        <option value="1">内链</option>
                        <option value="2">外链</option>
                    </select>
                </div>
            </div>

            <div class="layui-inline layui-col-md6">
                <label class="layui-form-label layui-form-required">链接地址</label>
                <div class="layui-input-block">
                    <input name="items[{{index}}].linkUrl" placeholder="请输入链接地址" type="text" class="layui-input item-linkUrl" />
                </div>
            </div>

            <div class="layui-inline layui-col-md6">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-block">
                    <input name="items[{{index}}].sort" placeholder="排序" type="number" class="layui-input item-sort" value="0" />
                </div>
            </div>
        </div>
    </div>
</script>

@}

